﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Cheresting" />
    <!-- 自动添加dayjs到全局 -->
    <script src="./publicJs/dayjs.min.js"></script>
    <!-- 自动添加vue到全局 -->
    <script src="./publicJs/vue.global.prod.js"></script>
    <!-- 自动添加axios到全局 -->
    <script src="./publicJs/axios.min.js"></script>
    <!-- 自动添加Cookies到全局 -->
    <script src="./publicJs/js.cookie.min.js"></script>
    <!-- 自动添加XLSX到全局 -->
    <script src="./publicJs/xlsx.core.min.js"></script>

    <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
    <!-- 自动添加ElementPlus到全局 -->
    <script src="./publicJs/element-plus.index.full.js"></script>
    <script src="./publicJs/index.iife.min.js"></script>

    <title>物料采购管理</title>
  </head>

  <body>
    <div id="app">
      <div v-loading="loading">
        <div class="material-purchase-container">
          <el-row>
            <el-input v-model="searchQuery" style="width: 500px; margin-right: 10px" clearable>
              <template #prepend>物料号:</template>
              <template #append>
                <el-button type="primary" @click="buttonClick.searchClick">搜索</el-button>
              </template>
            </el-input>
            <el-button type="primary" style="margin-right: 10px" @click="buttonClick.wrumxClick">未入库明细</el-button>
            <el-checkbox v-model="includeUnreleasedOrders">包含未释放订单</el-checkbox>
          </el-row>

          <el-row class="margin-top" :gutter="10">
            <el-col :span="12">
              <el-auto-resizer style="height: 90vh">
                <template #default="{ height, width }">
                  <el-table-v2
                    :columns="leftColumns"
                    :data="filteredMaterialDataLeft"
                    :width="width"
                    :height="height"
                    fixed
                    :header-cell-style="{ background: 'rgb(200, 201, 204)', color: '#606266' }"
                    :row-class="rowClass"
                    class="bordered-table"
                  />
                </template>
              </el-auto-resizer>
            </el-col>
            <el-col :span="12">
              <el-auto-resizer style="height: 90vh">
                <template #default="{ height, width }">
                  <el-table-v2
                    :columns="rightColumns"
                    :data="filteredMaterialDataRight"
                    :width="width"
                    :height="height"
                    fixed
                    :header-cell-style="{ background: 'rgb(200, 201, 204)', color: '#606266' }"
                    :row-class="rowClass"
                    class="bordered-table"
                  />
                </template>
              </el-auto-resizer>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    import myAxios from './myAxios/myAxios.js'
    import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'
    import v4 from './publicJs/uuidv4.js'

    const urlParams = new URLSearchParams(window.location.search)

    // 示例：获取名为"id"的参数
    try {
      const userid = urlParams.get('userid')
      console.log('userid :>> ', userid)
      const user_key = urlParams.get('user_key').replace(/\s+/g, '+') // 空格替换为 '+'
      console.log('user_key :>> ', user_key)
      const username = urlParams.get('username')
      console.log('username :>> ', username)
      Cookies.set('userid', userid)
      Cookies.set('user_key', user_key)
      Cookies.set('username', username)
    } catch (error) {
      console.log('error :>> ', error)
    }

    const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue
    const { Edit, Search } = ElementPlusIconsVue
    const app = createApp({
      name: 'MaterialPurchaseManagement',
      setup() {
        let loading = ref(false)
        const searchQuery = ref('')
        const includeUnreleasedOrders = ref(false)

        let numberRander = function ({ cellData: num }) {
          const factor = Math.pow(10, 3)
          return (Math.floor(num * factor) / factor).toFixed(3)
        }

        // 左侧表格列定义
        const leftColumns = [
          {
            key: 'index',
            dataKey: 'index',
            title: '序号',
            width: 60,
            align: 'center',
          },
          {
            key: 'MATNR',
            dataKey: 'MATNR',
            title: '物料号',
            width: 150,
            sortable: true,
          },
          {
            key: 'LABST',
            dataKey: 'LABST',
            title: '库存',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'LABST1',
            dataKey: 'LABST1',
            title: '线边库',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'UNCLEAR',
            dataKey: 'UNCLEAR',
            title: '未清采购',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'RSMNG',
            dataKey: 'RSMNG',
            title: '预留',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'EISBE',
            dataKey: 'EISBE',
            title: '已催未发',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'BSTRF',
            dataKey: 'BSTRF',
            title: '已发未到',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'YDWJ',
            dataKey: 'YDWJ',
            title: '已到未检',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'YJWR',
            dataKey: 'YJWR',
            title: '已检未入',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'BADQTY',
            dataKey: 'BADQTY',
            title: '不合格数',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'LOSTQTY',
            dataKey: 'LOSTQTY',
            title: '需催货量',
            width: 80,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'MAKTX',
            dataKey: 'MAKTX',
            title: '描述',
            width: 120,
            sortable: true,
          },
        ]

        // 右侧表格列定义
        const rightColumns = [
          {
            key: 'index',
            dataKey: 'index',
            title: '序号',
            width: 60,
            align: 'center',
          },
          {
            key: 'SUPPCODE',
            dataKey: 'SUPPCODE',
            title: '供应商代码',
            width: 120,
            sortable: true,
          },
          {
            key: 'DATA3',
            dataKey: 'DATA3',
            title: '供应商',
            width: 120,
            sortable: true,
          },
          {
            key: 'ACCEPTTIME',
            dataKey: 'ACCEPTTIME',
            title: '收货日期',
            width: 180,
            sortable: true,
          },
          {
            key: 'MATCODE',
            dataKey: 'MATCODE',
            title: '物料号',
            width: 150,
            sortable: true,
          },
          {
            key: 'PLANQTY',
            dataKey: 'PLANQTY',
            title: '计划数量',
            width: 100,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'RECEIVEQTY',
            dataKey: 'RECEIVEQTY',
            title: '收货数量',
            width: 100,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'GOODQTY',
            dataKey: 'GOODQTY',
            title: '合格数量',
            width: 100,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'BADQTY',
            dataKey: 'BADQTY',
            title: '不合格数量',
            width: 100,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'FORCHECKQTY',
            dataKey: 'FORCHECKQTY',
            title: '入库数量',
            width: 100,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'UNTESTQTY',
            dataKey: 'UNTESTQTY',
            title: '未检验数量',
            width: 100,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'UNINSAP',
            dataKey: 'UNINSAP',
            title: '未入库数量',
            width: 100,
            align: 'right',
            sortable: true,
            cellRenderer: numberRander,
          },
          {
            key: 'MATNAME',
            dataKey: 'MATNAME',
            title: '描述',
            width: 150,
            sortable: true,
          },
        ]

        const materialDataLeft = ref([])
        const materialDataRight = ref([])
        const filteredMaterialDataLeft = computed(() => {
          let result = materialDataLeft.value
          return result
        })
        const filteredMaterialDataRight = computed(() => {
          let result = materialDataRight.value
          return result
        })

        const buttonClick = {
          wrumxClick: function () {
            loading.value = true
            let param = `${searchQuery.value.replace(/,/g, "','")}`
            myAxios
              .get('陈帅廷查询电机库存未入库明细', param)
              .then((res) => {
                res.forEach((item, index) => {
                  item.index = index + 1
                })
                materialDataRight.value = res
                showSuccess('查询成功')
                loading.value = false
              })
              .catch((err) => {
                loading.value = false
                showWarning('查询失败: ' + err)
              })
          },
          searchClick: function () {
            loading.value = true
            let param = `9900🈹1001,7001🈹${searchQuery.value}🈹X🈹X`
            let functionName = includeUnreleasedOrders.value
              ? 'SAP库存（单物料,包含未释放订单）2'
              : 'SAP库存（单物料）1'
            myAxios
              .getSap(functionName, param, '9900')
              .then(async (res) => {
                let mesParam = `9900🈹${searchQuery.value.replace(/,/g, "','")}`
                let mesData = await myAxios.get('陈帅廷查询电机库存已催未发数量', mesParam)

                let sapData = res['TableSet']['返回表']
                let resultData = []
                for (let index = 0; index < sapData.length; index++) {
                  let row = sapData[index]
                  if (row['LGORT'] == '1001') {
                    let item = mesData.find((el) => el['MATCODE'] == row['MATNR'])
                    if (item) {
                      row['BSTRF'] = Number(item['UNLOADQTY'])
                      row['EISBE'] = Number(item['CALLQTY']) - Number(row['BSTRF'])
                      row['BADQTY'] = Number(item['BADQTY'])
                      row['YDWJ'] = Number(item['YDWJ'])
                      row['YJWR'] = Number(item['YJWR'])
                    } else {
                      row['BSTRF'] = 0
                      row['EISBE'] = 0
                      row['BADQTY'] = 0
                      row['YDWJ'] = 0
                      row['YJWR'] = 0
                    }
                    row['LOSTQTY'] = Number(row['RSMNG']) - row['BSTRF'] - row['EISBE'] - Number(row['LABST'])
                    row.index = resultData.length + 1
                    resultData.push(row)
                  } else if (row['LGORT'] == '7001') {
                    let item = sapData.find((el) => el['MATNR'] == row['MATNR'] && el['LGORT'] == '1001')
                    if (item) {
                      item['LABST1'] = Number(row['LABST'])
                    }
                  }
                }
                materialDataLeft.value = resultData
                showSuccess('查询成功')
                loading.value = false
              })
              .catch((err) => {
                loading.value = false
                showWarning('查询失败: ' + err)
              })
          },
        }

        // 行样式函数
        const rowClass = ({ rowIndex }) => {
          return rowIndex % 2 === 1 ? 'striped-row' : ''
        }

        return {
          loading,
          searchQuery,
          includeUnreleasedOrders,
          leftColumns,
          rightColumns,
          materialDataLeft,
          materialDataRight,
          filteredMaterialDataLeft,
          filteredMaterialDataRight,
          buttonClick,
          rowClass,
        }
      },
    })

    app.use(ElementPlus)
    app.mount('#app')
  </script>
  <style>
    .margin-top {
      margin-top: 10px;
    }

    /* 虚拟表格容器样式 */
    .material-purchase-container {
      height: calc(100vh - 60px);
      padding: 20px;
      box-sizing: border-box;
    }
    .striped-row {
      background-color: #f5f7fa;
    }

    /* 边框样式 */
    .bordered-table {
      border: 1px solid #ebeef5;
    }

    .bordered-table .el-table-v2__header-cell {
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }

    .bordered-table .el-table-v2__row-cell {
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
  </style>
</html>
